<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .container{
        display: grid;      /*定义Grid网格布局*/
        width: 600px;       /*父容器的宽度*/
        height: 600px;      /*父容器的高度*/
        grid-template-rows: repeat(2,200px);    /*重复的可以用这个 第一个数字是重复次数 第二个是高度*/
        grid-template-columns: repeat(2,200px 50px);
/*      grid-template-rows: 200px 200px 200px;      !*指定行的数量和项目的高度*!
        grid-template-columns: 200px 200px 200px;   !*指定列的数量和项目的宽度*!*/
    }
    .item{
        border: 1px solid black;
        background: aquamarine;
        box-sizing: border-box; /*盒模型*/
    }
</style>
<body>
<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
</div>
</body>
</html>